<template>
  <div id="app">
    <router-view/>

    <!-- 导航部分 -->
    <mt-tabbar>
      <mt-tab-item 
        v-for="(menu, index) in menuText" 
        :key="menu" 
        @click.native="menuTab(index)"
        :class="{'menuOn' : eq == index }"
      >
          <img slot="icon" :src="[ eq == index ? menuIconOn[index] : menuIconOff[index] ]" >
          {{ menu }}
      </mt-tab-item>
    </mt-tabbar>
    <!-- <star 
      v-for="grade in starGradeArr" 
      :key="grade" 
      :grade="grade"
    >
    </star> -->
  </div>
</template>

<script>
import star from "./components/publicModule/star";//引入星级评分组件

export default {
  name: "App",
  data () {
    return {
      starGradeArr: [1,7,9,4],//星级评分数组
      menuText: ["热映", "找片", "我的"], //菜单列表
      menuIconOff: [
        require("./assets/img/bottomNav/meOff.svg"),
        require("./assets/img/bottomNav/seeOff.svg"),
        require("./assets/img/bottomNav/hotOff.svg")
      ], //未选中ICON路径
      menuIconOn: [
        require("./assets/img/bottomNav/meOn.svg"),
        require("./assets/img/bottomNav/seeOn.svg"),
        require("./assets/img/bottomNav/hotOn.svg")
      ], //已选中ICON路径
      eq: "", //当前选中菜单的下标
      navUrl: ["/", "/seek", "/me"]
    };
  },

  methods: {
    //获取当前选中下标
    menuTab (index) {
      this.eq = index//存储下标
      this.$router.push(this.navUrl[this.eq])//跳转下标对应路由
    },
    //路由地址发生变化，导航栏对应位置高亮
    fetchDate () {
      for (let i in this.navUrl) {
        if (this.$route.path == this.navUrl[i]) {//获取当前路由地址在路由地址列表中的下标
          this.eq = i;//设置菜单高亮位置
        }
      }
    }
  },
  created () {
    !this.eq ? this.eq = 0 : this.eq;//若this.eq不存在则设置默认值为0
    this.$router.push(this.navUrl[this.eq])//设置路由默认地址
    if (this.navUrl[this.eq] != this.$route.path) {//若页面加载时非初始地址 则跳转至初始地址
      this.$router.push(this.navUrl[this.eq])
    }
  },
  watch: {
    // 如果路由有变化，会再次执行该方法
    "$route": "fetchDate"
  },
  components: {
    star
  }
};
</script>

<style>
@import url('./assets/css/base.scss');
.menuOn {
  color: #515151 !important;
}
.mint-tabbar > .mint-tab-item.is-selected {
  background-color: #fff;
  color: #bfbfbf;
}
.mint-tabbar > .mint-tab-item.is-selected:hover {
  cursor: pointer;
}
.mint-tabbar {
  box-shadow: 0px 4px 13px rgba(0, 0, 0, 0.7);
  position: fixed;
  max-width: 640px;
  left: 0;
  right: 0;
  margin: auto;
}
</style>
